<template>
  <div class="unique-part">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学术成果</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/portalAudit' }"
        >学术成果申诉</el-breadcrumb-item
      >
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-container class="container">
        <el-main>
          <!-- 搜索区域 -->
          <el-row :gutter="20">
            <!-- <el-col :span="7">
              <el-input placeholder="请输入内容" v-model="query">
                <template v-slot:append>
                  <el-button @click="search" :icon="Search"></el-button>
                </template>
              </el-input>
            </el-col> -->
            <!-- 占空的 -->
            <el-col :span="15">
              <div></div>
            </el-col>
            <!-- 门户列表 -->
            <div class="table">
              <el-table
                :data="userlist"
                :default-sort="{ prop: 'id', order: 'ascending' }"
                border
                class="userlist"
              >
                <el-table-column
                  prop="id"
                  label="序号"
                  sortable
                ></el-table-column>
                <el-table-column
                  prop="aca_id"
                  label="学术成果id"
                  sortable
                ></el-table-column>
                <el-table-column prop="type" label="申诉类型">
                </el-table-column>
                <el-table-column prop="authentication" label="验证信息">
                </el-table-column>
                <el-table-column prop="port_id" label="被申诉门户id">
                </el-table-column>
                <el-table-column prop="user_port_id" label="申诉人门户id">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="审核">
                  <template v-slot="scope">
                    <el-button
                      type="success"
                      :icon="Check"
                      circle
                      @click="handleCheck(scope.row)"
                    ></el-button>
                    <el-button
                      type="success"
                      :icon="Document"
                      circle
                      @click="handleInfo(scope.row)"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
        </el-main>
        <el-footer>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @current-change="getUserList"
              v-model:currentPage="queryInfo.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-card>

    <!-- 添加用户表格 -->
    <el-dialog title="审核信息" v-model="this.dialogVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="审核信息" prop="info">
          <el-input v-model="ruleForm.info"></el-input>
        </el-form-item>
        <el-form-item label="是否通过审核" prop="agree">
          <el-switch v-model="ruleForm.agree" />
        </el-form-item>
      </el-form>

      <div class="button-div">
        <el-form-item class="form-button">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </div>
    </el-dialog>

    <el-dialog title="相关信息" v-model="this.changedialogVisible" width="40%">
      <div class="collapse">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="学术成果信息" name="1">
            <div>ID: {{ this.paperData.id }}</div>
            <div>标题: {{ this.paperData.title_top }}</div>
            <div>作者:</div>
            <div v-for="(author, i) in this.paperData.author" :key="i">
              &emsp;&emsp;&nbsp;&nbsp;{{ author.name }}
            </div>
            <div>日期: {{ this.paperData.date }}</div>
            <div>
              授权: {{ this.paperData.copy_right ? "已授权" : "未授权" }}
            </div>
          </el-collapse-item>
          <el-collapse-item title="被申诉门户信息" name="2">
            <div>ID: {{ this.userData.id }}</div>
            <div>名称: {{ this.userData.name }}</div>
            <div>部门: {{ this.userData.company }}</div>
            <div>二级学科分类: {{ this.userData.department }}</div>
          </el-collapse-item>
          <el-collapse-item title="申诉人门户信息" name="3">
            <div>ID: {{ this.aUserData.id }}</div>
            <div>名称: {{ this.aUserData.name }}</div>
            <div>部门: {{ this.aUserData.company }}</div>
            <div>二级学科分类: {{ this.aUserData.department }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import axios from "axios";
  import { Check, Document } from "@element-plus/icons";
</script>
<script>
  export default {
    data() {
      return {
        activeNames: ["1", "2", "3"],
        query: "",
        queryInfo: {
          query: "",
          page: 1,
          num: 10,
        },
        userlist: [],
        total: 0,
        dialogVisible: false,
        ruleForm: {
          id: null,
          info: null,
          agree: null,
        },
        paperData: {},
        userData: {},
        aUserData: {},
        rules: {
          agree: [
            { required: true, message: "请选择审核是否通过", trigger: "change" },
          ],
        },
        changedialogVisible: false,
      };
    },
    created() {
      this.query = sessionStorage.getItem("query");
      this.getUserList();
    },
    methods: {
      getUserList() {
        axios.post("appeal_academic/", this.queryInfo).then((response) => {
          console.log(response.data);
          this.userlist = response.data.information;
          this.total = response.data.pages * 10;
          console.log(this.total)
        });
      },
      handleCheck(row) {
        console.log(row);
        this.dialogVisible = true;
        this.ruleForm.id = row.id;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (!this.ruleForm.info) {
              if (this.ruleForm.agree) {
                this.ruleForm.info = "同意";
              } else {
                this.ruleForm.info = "不同意";
              }
            }
            const formData = {
              id: this.ruleForm.id,
              is_passed: this.ruleForm.agree,
              message: this.ruleForm.info,
            };
            axios.post("save_appeal_academic/", formData).then((response) => {
              console.log(response.data);
              this.getUserList();
            });
            this.dialogVisible = false;
          } else {
            console.log("error submit!");
            return false;
          }
        });
      },
      search() {
        this.queryInfo.query = this.query;
        this.getUserList();
        sessionStorage.setItem("query", this.query);
      },
      async handleInfo(row) {
        console.log(row);

        // 获取几个id
        var academicId = row.aca_id;
        var portId = row.port_id;
        var userPortId = row.user_port_id;

        const data1 = {
          acd_ach_id: academicId,
        };

        const data2 = {
            pid: portId
        };

        const data3 = {
            pid: userPortId
        };

        await axios.post("detail/", data1).then((response) => {
          // console.log("yes")
          this.paperData = response.data;
          this.paperData['id'] = academicId;
        });

        await axios.post("appeal_show_port/", data2).then((response) => {
          // console.log("yes")
          console.log(response.data);
          this.userData = response.data.information;
          this.userData['id'] = portId;
        });

        await axios.post("appeal_show_port/", data3).then((response) => {
          // console.log("yes")
          console.log(response.data);
          this.aUserData = response.data.information;
          this.aUserData['id'] = userPortId;
        });

        this.changedialogVisible = true;
      },
      // changeIdentity($event, row) {
      //   const formData = {
      //     username: row.username,
      //     password: row.password,
      //     email: row.email,
      //     is_administrator: row.is_administrator,
      //   };
      //   axios
      //     .put("admin/users/" + row.username + "/", formData)
      //     .then((response) => {
      //       console.log(response.data);
      //       this.getUserList();
      //     });
      // },
    },
  };
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.add-user {
  width: 70%;
  align-content: center;
  text-align: center;
}

.userlist {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 13px;
  /* width: 98%; */
}

.el-table {
  width: fit-content;
}

.table {
  width: 100%;
}

.el-container {
  height: 100%;
}

.el-pagination {
  margin-left: 10px;
  margin-top: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.form-button {
  display: block;
  width: fit-content;
}

.button-div {
  display: flex;
  justify-content: center;
}

.el-switch {
  margin-left: 30px;
}
</style>
